<template>
	<page-layout class="page">
		<pure-gap size="12px"></pure-gap>

		<view class="pj-padding-sides">
			<!-- 基础使用 -->
			<pj-demo title="基础使用">
				<pure-tabbar
					class="tabbar"
					:list="list"
					:value="checked"
					@onClick="_handleClick"
				></pure-tabbar>
			</pj-demo>

			<pure-tabbar
				class="tabbar"
				:list="list"
				:value="checked"
				:is-fixed="true"
				@onClick="_handleClick"
			></pure-tabbar>
		</view>

		<pure-gap size="12px"></pure-gap>
	</page-layout>
</template>

<script setup>
	import { ref } from "vue";

	const list = ref([
		{
			text: "首页",
			value: "home",
			iconPath: "/static/images/i_001.png",
			selectedIconPath: "/static/images/i_002.png"
		},
		{
			text: "分类",
			value: "category",
			iconPath: "/static/images/i_003.png",
			selectedIconPath: "/static/images/i_004.png"
		},
		{
			text: "购物车",
			value: "cart",
			iconPath: "/static/images/i_005.png",
			selectedIconPath: "/static/images/i_006.png"
		},
		{
			text: "我的",
			value: "user",
			iconPath: "/static/images/i_007.png",
			selectedIconPath: "/static/images/i_008.png"
		}
	]);
	const checked = ref(list.value[0]);

	// 切换
	function _handleClick(index, item) {
		checked.value = item;
	}
</script>

<style lang="scss" scoped></style>
